<template>
	<div>
		<div>
			<span class='m-l-10'>
				<el-select clearable style='width:150px' size='mini' v-model='filter.status' placeholder='充电状态' @change='search'>
					<el-option label='充电中' :value='1'></el-option>
					<el-option label='已完成' :value='2'></el-option>
				</el-select>
			</span>
			<span class='m-l-10' v-if='checkPermission("admin")'>
				<el-select clearable style='width:150px' size='mini' v-model='filter.agentId' placeholder='所属代理商' @change='search'>
					<el-option :label='item.agent_name' :value='item.agent_id' v-for='item in agentList'></el-option>
				</el-select>
			</span>
			<span class='m-l-10' v-if='checkPermission("agent")'>
				<el-select clearable style='width:150px' size='mini' v-model='filter.storeId' placeholder='所属门店' @change='search'>
					<el-option :label='item.store_name' :value='item.store_id' v-for='item in storeList'></el-option>
				</el-select>
			</span>
			<span class='m-l-10'>
				<span>下单时间</span>
				<el-date-picker
				 @change='search'
					style='width:250px'
					class='m-l-10'
					size='mini'
				  v-model='filter.date'
				  type='daterange'
				  align='right'
				  unlink-panels
				  range-separator='-'
				  value-format="yyyy-MM-dd"
				  start-placeholder='开始日期'
				  end-placeholder='结束日期'>
				</el-date-picker>
			</span>
			<span class='m-l-20'>
				<el-input style='width:350px' size='mini' v-model='filter.searchKey' placeholder='请输入内容'>
					<el-select slot='prepend' size='mini' clearable v-model='filter.searchType' placeholder='搜索类型' style='width:100px'>
						<el-option v-for='(item, key) in {1 : "订单号", 2 : "设备号"}' :label='item' :value='key'></el-option>
					</el-select>
					<el-button slot='append' size='mini' type='primary' icon='el-icon-search' @click='search'>搜索</el-button>
				</el-input>
			</span>
			<span class='m-l-30'>
				<el-button size='mini' type='primary' :icon='{"el-icon-download" : !downloadLoading, "el-icon-loading" : downloadLoading}' @click='handleDownload'>导出</el-button>
			</span>
		</div>
		<section class='m-t-50'>
			<el-table style='font-size:12px;text-align:center;' ref='multipleTable' :data='orderList'>
				<el-table-column label='订单号' align='center'>
					<template slot-scope='scope'>{{ scope.row.order_no }}</template>
				</el-table-column>
				<el-table-column label='充电桩' align='center'>
					<template slot-scope='scope'>{{ scope.row.device_no + '#' + scope.row.port_no}}</template>
				</el-table-column>>
				<el-table-column label='计费方式' align='center' width='80'>
					<template slot-scope='scope'>{{ chargePriceChargeTypeList[scope.row.charge_type] }}</template>
				</el-table-column>
				<el-table-column v-if='checkPermission("admin")' label='代理商' align='center' width='80'>
					<template slot-scope='scope'>{{ scope.row.agent_name }}</template>
				</el-table-column>
				<el-table-column v-if='checkPermission("admin", "agent")' label='门店' align='center' width='80'>
					<template slot-scope='scope'>{{ scope.row.store_name }}</template>
				</el-table-column>
				<el-table-column label='充电时间' width='250px'>
					<template slot-scope='scope'>
						<div>开始充电时间:{{scope.row.start_time | parseTime }}</div>
						<div v-if='scope.row.status == 2'>结束充电时间:{{scope.row.end_time | parseTime }}</div>
					</template>
				</el-table-column>
				<el-table-column label='充电数据' width='250px'>
					<template slot-scope='scope'>
						<div>设置充电{{scope.row.charge_type == 1 ? '时长' : '度数'}}：{{scope.row.charge_quantity}}{{scope.row.charge_type == 1 ? '分钟' : '度'}}</div>
						<template v-if='scope.row.status == 2'>
							<div>实际充电时长：<span class='color-f56c6c'>{{scope.row.consume_time}}分钟</span></div>
							<div>实际消耗电量：<span class='color-f56c6c'>{{scope.row.consume_energy}}度</span></div>
							<!-- <div>平均功率：<span class='color-f56c6c'>{{scope.row.avg_power}}W</span></div>
							<div>最大功率：<span class='color-f56c6c'>{{scope.row.max_power}}W</span></div> -->
						</template>
					</template>
				</el-table-column>
				<el-table-column label='支付金额(元)'>
					<template slot-scope='scope'>
						<div>预付金额：{{ scope.row.amount }}</div>
						<div v-if='scope.row.status == 2'>
							<div v-if='scope.row.refund_amount > 0'>退款：{{scope.row.refund_amount}}</div>
							<div>实付金额：<span class='color-f56c6c'>{{scope.row.consume_amount}}</span></div>
						</div>
					</template>
				</el-table-column>
				
				<el-table-column label='充电状态' align='center' width='80'>
					<template slot-scope='scope'>
						<span :class='{"color-67c23a" : scope.row.status == 1}'>{{ scope.row.status == 1 ? '正在充电' : '已完成' }}</span>
					</template>
				</el-table-column>
				
				<el-table-column fixed='right' align='center'>
					<template slot-scope='scope'>
						<router-link class='color-primary' :to='"/order/chargeDetail/" + scope.row.order_id'>查看详情</router-link>
					</template>
				</el-table-column>
			</el-table>
			
			<div class='m-t-30'>
				<pagination ref='pagination' :query='pageQuery' v-on:page='orderList = $event' url='ChargeOrder/orderList'></pagination>
			</div>
			
		</section>
		
	</div>
</template>

<script src='./charge.js'></script>